<template>
<div>
	<div id="header">
		<div class="header-left">
			<div class="btr" v-on:click="goDetlid"></div>
		</div>
		<div class="title">
			{{MovieDetlid.title}}
		</div>
		<div class="header-left"></div>
	</div>
	<div>
		<div class="movie">
			<div class="movie_message">
			  <img v-bind:src="MovieDetlid.images.medium">
			</div>
			<div class="message">
				<h3>{{MovieDetlid.title}}</h3>
				<div class="star">
          			<star :num="MovieDetlid.rating.stars"></star>
       			</div>
				<p>{{MovieDetlid.rating.average}}</p>
				<p>{{MovieDetlid.year}}</p>
				<p>
					<span v-for="genres in MovieDetlid.genres">{{genres }}</span>
				</p>
				<p>{{MovieDetlid.countries[0]}}</p>
				<p>{{MovieDetlid.pubdates[2]}}</p>
			</div>
		</div>
	</div>
	<div style="background-color:#e5e9f2">
	<div class="wantsee">
		<div class="want">
			<span>{{MovieDetlid.reviews_count}}人想看</span>
		</div>
		<div class="see">
			<span>{{MovieDetlid.wish_count}}人看过</span>
		</div>
	</div>
	<p class="jsao">{{MovieDetlid.summary}}</p>
	<div class="actor">
		<h3>演职人员</h3>
		<div class="line">
			<div class="directors" v-on:click="goDirectors(MovieDetlid.directors[0].id)">
				<img v-bind:src="MovieDetlid.directors[0].avatars.small">
				<div class="name">{{MovieDetlid.directors[0].name}}</div>
			</div>
			<div class="directors" v-for="message in MovieDetlid.casts" v-on:click="goActor(message.id)">
				<img v-bind:src="message.avatars.small">
				<div class="name">{{message.name}}</div>
			</div>
		</div>
	</div>
		<div class="hot actor">
			<h3>热门短评</h3>
			<loading v-if="loading"></loading>
			<div class="tall" v-for="reviews in MovieDetlid.popular_reviews" v-if="!loading">
				<star :num="(reviews.rating.value)*10"></star>
				<p>{{reviews.summary}}</p>
				<div class="author">
					<img v-bind:src="reviews.author.avatar"><span>{{reviews.author.name}}</span>
				</div>
			</div>
		</div>
		<div class="all" v-on:click="getDp(MovieDetlid.id)">
			查看全部短论
		</div>
		<div class="all">
			查看全部影评
		</div>
	</div>	
</div>
</template>
<script>
  	import loading from "./loading"
	import star from "./star"
	export default{
		name:"MovieDetlid",
		data(){
			return{
				loading:true,
				MovieDetlid:{}
			}
		},
		methods:{
    		goDetlid:function(){
		     this.$router.go(-1)
		    },
		    getDp:function(id){
		    	this.$router.push({name:'short_reviews',params:{id:id}})
		    },
		    goDirectors:function(id){
		    	this.$router.push({name:'ActorList',params:{id:id}})
		    },
		    goActor:function(id){
		    	this.$router.push({name:'ActorList',params:{id:id}})
		    }
		  },
		components:{
		    star:star,
		    loading:loading
		  },
		mounted:function(){
			var id = this.$route.params.id
		    this.$http.jsonp('https://api.douban.com/v2/movie/subject/'+id+"?apikey=0b2bdeda43b5688921839c8ecb20399b").then(function(response){
		    	this.loading = false
		    	this.MovieDetlid = response.body;
		    })
		  }
	}

</script>
<style scoped>
	#header{
		height: 50px;
		width: 100%;
		background-color: #e54847;
		box-sizing: border-box;
		padding: 6px;
		display: flex;
		text-align: center;
		overflow: hidden;
	}
	#header .header-left{
		flex: 1;
		position: relative;
	}
	#header .header-left .btr{
		position: absolute;
	    top: 12px;
	    left: 20px;
	    height: 13px;
	    width: 13px;
	    border: 2px solid #fff;
	    border-width: 0 0 2px 2px;
	    -webkit-transform: rotate(45deg);
	    transform: rotate(45deg);
	}
	#header .title{
		font-size: 20px;
		color:#fff;
		line-height: 40px;
		flex: 4;
	}
	#header .header-right{
		flex: 1;
	}
	.movie{
		overflow: hidden;
		padding: 15px;
	    color: #6b6868;
	    background-color: #b4b1b1;
	}
	.movie_message img{
		float: left;
		border: 1px solid #fff;
		margin-right: 10px;
	}
	.movie .message{
		float: left;
	}
	.movie .message p{
		font-size: 12px;
		line-height: 18px;
	}
	.movie .message h3{
		font-size: 20px;
    	color: #343232;
	}
	.movie .message .star{
		padding-top: 5px;
	}
	.wantsee{
		display: flex;
		padding: 10px;
		overflow: hidden;
	}
	.wantsee .want{
		text-align: center;
		flex: 50%;
	}
	.wantsee .see{
		text-align: center;
		flex: 50%;
	}
	.wantsee span{
		display: inline-block;
		margin-right: 20px;
	    margin-left: 20px;
	    font-size: 14px;
	    line-height: 30px;
	    text-align: center;
	    width: 100px;
	    height: 30px;
	    color: #fff;
	    border-radius: 5px;
	    background-color: #e54847;
	}
	.jsao{
		line-height: 21px;
		padding: 10px;
	    font-size: 14px;
	    color: #555; 
	}
	.actor{
		padding: 10px;
	}
	.actor h3{
		color: #666;
	    font-size: 15px;
	    font-weight: 700;
	    margin-bottom: 5px;
	}
	.actor .line{
		overflow: hidden;
		display: flex;
		margin-top: 10px;
		overflow-x:scroll; 
	}
	.actor .directors{
		flex:1;
		margin-right: 5px;
	    white-space: nowrap;
	}
	.actor .directors .name{
		line-height: 21px;
		font-size: 12px;
		color:#2c3e50;
	    width: 70px;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
	.tall{
		border-bottom: 1px solid #d6d3d3;
		padding-bottom: 5px;
	}
	.hot p{
		color: #333;
		line-height: 18px;
		font-size: 12px;	
	    margin-bottom: 10px;
	    margin-top: 10px;
	}
	.hot span{
		vertical-align: 80%;
    	margin-left: 5px;
    	color: #999;
		font-size: 12px;
	}
	.hot img{
		border-radius: 50%;
	}
	.all{
		color: #e54847;
	    font-weight: lighter;
	    text-align: center;
	    font-size: 15px;
	    height: 30px;
	    line-height: 30px;
	    border-bottom: 1px solid #d6d3d3;
	}
</style>